<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分配权限</title>
    <link rel="stylesheet" href="__LAY__/css/layui.css" media="all">
    <link rel="stylesheet" href="__CSS__/main.css" media="all">
    <link rel="stylesheet" href="__FONT__/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__TREE__/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<input hidden="hidden" type="text" id="groupid" value="{$role_info.role_id}"/>
<h3 style="font-size: 14px; text-align: center; padding: 10px; font-weight: bold;">给{$role_info.role_name}分配权限</h3>
<div class="content_wrap" style="border: 1px solid #eee; text-align: center;">
    <div style="text-align: center;">
        <ul id="rule_group" class="ztree"></ul>
    </div>
</div>
<div style="text-align: center; margin-top: 20px;">
    <button id='give_group_rule' class="layui-btn">分配</button>
</div>
<script type="text/javascript" src="__JS__/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__LAY__/layui.js"></script>
<script type="text/javascript" src="__JS__/index.js"></script>
<script type="text/javascript" src="__TREE__/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="__TREE__/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
    var arr = [];
    layui.use(['layer'], function () {
        var layer = layui.layer,
        jq = layui.jquery;
        //调用ztree
        crete_ztree();
        //分配权限
        jq('#give_group_rule').click(function () {
            // alert(arr);return false;
            var index = layer.msg('分配权限中，请稍候', {icon: 16, time: false, shade: 0.8});
            var json = JSON.stringify(arr);
            jq.post("{:url('role/distribution')}", {id: jq('#groupid').val(), 'json': json}, function (res) {
                layer.close(index);
                if (res.code == 1) {
                    swal({
                        title: res.msg,
                        timer: 2000,
                        type: 'success'
                    }).then(
                        function (dismiss) {
                            layer.closeAll('iframe');
                            parent.location.reload();
                        }
                    );
                } else {
                    layer.msg(res.msg);
                }
            });
            return false;
        });
    });

    //创建ztree
    function crete_ztree() {
        //ztee的使用
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck
            }
        };
        var zNodes = {$json_node};
        var zTree = $.fn.zTree.init($("#rule_group"), setting, zNodes);
        console.log(zTree);
        zTree.setting.check.chkboxType = {"Y": "ps", "N": "s"};
    }

    //选择节点改变获取所有选中的数据
    function onCheck() {
        arr = [];
        var zTree = $.fn.zTree.getZTreeObj("rule_group"),
            nodes = zTree.getCheckedNodes();
        for (var i = 0, l = nodes.length; i < l; i++) {
            arr.push(nodes[i].id);
        }
    }

</script>


</body>
</html>